<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        body{
            height: 2000px;
        }

        /* 1.静态定位 等于没有定位 */
        div{
            position: static;
        }



        /* 2. 相对定位 自恋型定位 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .one {
            position: relative;/*加上这行代码表示相对定位 */
            top: 100px;
            left: 100px;
        }
        /* 相对定位保留原来的位置 */



        /* 3. 绝对定位 没有父级或父级无定位的情况 */
        /* 以浏览器文档定位 */
        .three{
            position: absolute;
            top: 100px;
            right: 100px;
        }
        /* 父级有定位就以父级为参考 */
        /* 绝对定位不占原有位置 */


        /* 4. 固定定位 */
        /* 可视窗口里的定位 */
        .four{
            position: fixed;
            right: 10px;
            top: 200px;
        }

        /* 粘性定位 */
        .five{
            position: sticky;
            top: 1px;
            width: 800px;
            height: 50px;
            margin: 10px auto;
            background-color: rgb(78, 117, 202);

        }

        /* 叠放顺序z-index :123; */
        /* 定位盒子有居中算法 */
        /* 加了定位可以直接设置高度何况宽度 不管行内元素什么的 */
        /* 定位会压住文字 浮动不会 */


    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>



</body>

</html>